
<template>
  <div>
    <!-- 标题 -->
    <div class="titles">
      <h2>教师账号管理</h2>
    </div>
    <!-- 功能区域 -->
    <div id="margins" class="header">
      <!-- 查询 -->
      <span id="title" class="interval">学院：</span>
      <el-select v-model="params.departmentId" placeholder="请选择学院" @change="majors()">
        <el-option v-for="de in department" :Key="de.departmentId" :label="de.departmentName"
          :value="de.departmentId"></el-option>
      </el-select>
      <span id="title" class="interval">工号：</span>
      <el-input class="inline" v-model="params.username" placeholder="请输入工号"></el-input>
      <span id="title" class="interval">姓名：</span>
      <el-input class="inline" v-model="params.nickname" placeholder="请输入姓名"></el-input>
      <el-button class="interval" type="primary" @click="findBySearch()" size="small">查询</el-button>
      <el-button style="margin-left:5px" type="danger" @click="reset" size="small">重置</el-button>
      <div class="headerOne">
        <template>
          <el-popconfirm :title="'确定要删除' + this.Selection.length + '条吗？'" @onConfirm="deleteByIdss()">
            <el-button size="small" type="danger" slot="reference"
              style="background: rgb(253, 7, 7);margin-right:5px">批量删除</el-button>
          </el-popconfirm>
        </template>
        <!-- 批量导入 -->
        <el-upload ref="upload" action multiple :limit="1" :on-exceed="handleExceed" :http-request="uploadExcel"
          :accept="region">
          <el-button size="small" type="success" @click="checkInfoData()">导入报表</el-button>
        </el-upload>
      </div>
    </div>
    <!-- 列表 -->
    <div class="list" id="margins">
      <el-table :data="tableData" border style="width: 100%" ref="table" :row-key="getRowKeys"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
        <el-table-column prop="username" label="工号" align="center" width="150"></el-table-column>
        <el-table-column prop="nickname" label="姓名" width="150" align="center"></el-table-column>
        <el-table-column prop="departmentName" label="学院" align="center" width="250"></el-table-column>
        <el-table-column prop="idCard" label="身份证号" align="center" width="250"></el-table-column>
        <el-table-column prop="uploadFile" label="证件 " align="center" width="250">
          <!-- 图片的显示 -->
          <template slot-scope="scope">
            <el-image v-if="scope.row.uploadFile" style="width: 100px; height: 100px"
              :src="`http://localhost:8015/user/` + scope.row.uploadFile"
              :preview-src-list="[`http://localhost:8015/user/` + scope.row.uploadFile,]"></el-image>
            <div v-else style="line-height: 125px">暂无证件</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态 " align="center">
          <template slot-scope="scope">
            <span v-show="scope.row.status == 0" style="color: rgba(255, 0, 0, 0.539)">未通过</span>
            <span v-show="scope.row.status == 1">审批中</span>
            <span v-show="scope.row.status == 2" style="color: rgba(0, 128, 0, 0.62)">通过</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="290">
          <template slot-scope="scope">
            <el-button type="primary" @click="passAccount(scope.row.id)" size="small"
              :disabled="scope.row.status == 1 ? false : true">通过</el-button>
            <el-button type="danger" size="small" @click="failAccount(scope.row.id)"
              :disabled="scope.row.status == 1 ? false : true">驳回</el-button>
            <el-button type="warning" @click="Upload(scope.row)" size="small">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteA(scope.row)" style="background: red;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹出盒子-->
      <el-dialog :title="DialogTitle" :visible.sync="Dialog" center>
        <el-form :model="organization" :rules="rules" ref="ruleFormOrganization">
          <el-form-item label="工号:" :label-width="LabelWidth">
            <el-input v-model="organization.username" placeholder="请输入工号" autocomplete="off" readonly></el-input>
          </el-form-item>
          <el-form-item label="姓名:" :label-width="LabelWidth" prop="nickname">
            <el-input v-model="organization.nickname" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号:" :label-width="LabelWidth" prop="phone">
            <el-input v-model="organization.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="身份证号:" :label-width="LabelWidth" prop="idCard">
            <el-input v-model="organization.idCard" placeholder="请输入身份证号"></el-input>
          </el-form-item>
          <el-form-item label="二级学院:" :label-width="LabelWidth" prop="departmentName">
            <el-select v-model="organization.departmentId" placeholder="请选择学院" @change="majors()">
              <el-option v-for="de in department" :Key="de.departmentId" :label="de.departmentName"
                :value="de.departmentId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="callOff()">取 消</el-button>
          <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 分页 -->
      <div class="paging">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="params.pageNum" :page-sizes="[10, 15, 20]" :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { deleteByIds, deletePersonnel, pagingTeacher, accountManagement, } from "@/api/admin/achievement_typeAPI";
import { uploadExcel } from "@/api/excel";
import { getDepartments, getMajorsByDepartmentId } from "@/api/user";
import { amend } from "@/api/teacher/pupil";

export default {
  data() {
    return {
      // 输入信息校验
      rules: {
        nickname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        idCard: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            pattern: /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/,
            message: "身份证号码格式不正确",
            trigger: "blur",
          },
        ],
        departmentName: [
          { required: true, message: "请选择院系", trigger: "blur" },
        ],
      },
      organization: {}, // 提交信息
      // 弹出框是否展示
      Dialog: false,
      DialogTitle: "编辑信息",
      //表头宽度
      LabelWidth: "120px",
      department: [], //学院数据
      major: [], // 专业数据
      //专业下拉框
      Major: [],
      //学院下拉框
      Departments: [],
      // 上传格式
      region: ".xlsx",
      params: {
        departmentName: "",
        username: "",
        nickname: "",
        pageNum: 1,
        pageSize: 10,
      },
      // 总共信息条数
      total: 0,
      // 列表
      tableData: [],
      // 批量删除id
      Selection: [],
      // 注册账号审核状态
      RegistrationAudit: {},
    };
  },
  created() {
    this.findBySearch();
  },
  methods: {
    // 修改信息验证
    submitForm(formName) {
      this.$refs.ruleFormOrganization.validate((valid) => {
        if (valid) {
          this.EditUpload();
        } else {
          this.$message.error("填写信息错误或有未填选信息");
          return false;
        }
      });
    },
    //取消按钮
    callOff() {
      this.findBySearch();
      this.Dialog = false;
    },
    // 修改学生信息
    EditUpload() {
      amend(this.organization).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.findBySearch();
          this.Dialog = false;
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    // 显示弹出框
    Upload(title) {
      this.Dialog = true;
      this.organization = title;
      console.log(this.organization);
    },
    // 获取部门数据方法
    departmentData() {
      getDepartments().then((res) => {
        this.department = res.data;
        console.log("专业", res);
      });
    },
    // 获取学院数据
    majors() {
      getMajorsByDepartmentId(this.params.departmentId).then((res) => {
        this.major = res.data;
      });
      this.major = " "; //学院清空
    },

    clearFiles() {
      this.$refs.upload.clearFiles();
    },
    // 自定义上传事件
    uploadExcel(e) {
      const from = new FormData();
      from.append("file", e.file);
      uploadExcel(from).then((res) => {
        if (res.code == 200) {
          this.$message.success("批量导入成功");
          this.clearFiles();
          this.findBySearch();
        } else {
          this.$message.error("批量导入失败");
        }
      });
    },
    // 文件上传
    checkInfoData() {
      this.$refs.upload.submit();
    },
    // 限制上传文件数量
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    // 注册账号审核成功状态
    passAccount(id, status) {
      this.RegistrationAudit.id = id;
      this.RegistrationAudit.status = status;
      this.RegistrationAudit.status = 2;
      accountManagement(this.RegistrationAudit).then((res) => {
        if (res.code == 200) {
          this.$message.success("注册账号通过");
          this.findBySearch();
        }
      });
    },
    // 注册账号审核失败状态
    failAccount(id, status) {
      this.RegistrationAudit.id = id;
      this.RegistrationAudit.status = status;
      this.RegistrationAudit.status = 0;
      accountManagement(this.RegistrationAudit).then((res) => {
        if (res.code == 200) {
          this.$message.error("注册账号失败");
          this.findBySearch();
        }
      });
    },
    //分页查询
    findBySearch() {
      pagingTeacher({
        departmentId: this.params.departmentId,
        majorId: this.params.majorId,
        username: this.params.username,
        nickname: this.params.nickname,
        pageNum: this.params.pageNum,
        pageSize: this.params.pageSize,
      }).then((res) => {
        if (res.code === 200) {
          //给列表渲染数据
          this.tableData = res.data.list;
          // 数据总条数
          this.total = res.data.total;
          this.departmentData();
        }
      });
    },
    handleSizeChange(pagesize) {
      this.params.pageSize = pagesize;
      this.findBySearch();
    },
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.findBySearch();
    },

    // 清空查询
    reset() {
      (this.ruleForm = {}),
        (this.params = {
          departmentName: "",
          username: "",
          nickname: "",
          pageNum: 1,
          pageSize: 10,
        });
      this.findBySearch();
    },
    // 删除学生信息
    deleteA(row) {
      this.openDelConfirm(row.nickname)
        .then(() => {
          deletePersonnel(row.id).then((res) => {
            this.findBySearch();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // 刷新页面
            this.findBySearch();
          });
        })
        .catch(() => {
          console.log("取消删除");
        });
    },
    //删除时提示
    openDelConfirm(name) {
      return this.$confirm(`确定删除：“${name}”老师账号吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
    },
    //批量删除
    //获取当前行信息
    handleSelectionChange(val) {
      this.Selection = val;
      console.log(val);
    },
    getRowKeys(row) {
      return row.id;
    },
    deleteByIdss() {
      if (this.Selection.length == 0) {
        this.$message.warning("请勾选想要删除的信息");
        return;
      }
      deleteByIds(this.Selection).then((res) => {
        if (res.code === 200) {
          this.$message.success("批量删除成功");
          this.findBySearch();
          this.$refs.table.clearSelection();
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style>
/* 上传文件按钮样式 */
.button {
  width: 100px;
  height: 40px;
  margin-left: 30px;
  margin-bottom: auto;
}

/* 分页样式 */
.paging {
  padding-top: 30px;
  text-align: right;
}

/* 搜索框样式 */
.inline {
  width: 200px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.headerOne {
  display: flex;
  position: absolute;
  right: 50px;
}

/* 字体样式 */
.interval {
  margin-left: 10px;
}
</style>
